<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Nav Management</title>
    {include file="/admin/head"/}
</head>
<body>
<div class="x-body">
    <div class="layui-form">
        <input type="text" id="id" name="id" value="{$info.id|default=0}" style="display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">
                Title
            </label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" required lay-verify="required"
                       autocomplete="off" class="layui-input" value="{$info.name|default=''}"
                >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                Price
            </label>
            <div class="layui-input-inline">
                <input type="text" id="price" name="name" required lay-verify="required"
                       autocomplete="off" class="layui-input" value="{$info.price|default=''}"
                >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                简单介绍
            </label>
            <div class="layui-input-inline">
                <input type="text" id="info" name="name" class="layui-input" value="{$info.info|default=''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                ImageImages
            </label>
            <div class="layui-input-inline">
                <input type="text" id="image_id" value="{$info.image_id|default=0}" style="display:none;">
                <input type="file" id="image-file" style="display: none;" onchange="imagefile(this)" accept="image/*">
                <img src="{$info.image|default='/static/admin/img/none.jpg'}" id="image" onclick="imagesave()" style="max-width: 150px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                Rotating Images
            </label>
            <div class="layui-input-inline" style="width: 750px">
                <input type="file" id="images-array-file" style="display: none;" onchange="imagesfile(this)" accept="image/*">
                <table class="table-images">
                    <thead>
                        <tr>
                            <th>Images</th>
                            <th>Links</th>
                            <th>Title</th>
                            <th>Describe</th>
                            <th>Sort</th>
                            <th>Option</th>
                        </tr>
                    </thead>
                    <tbody id="image-tbody">
                        {notempty name="info.images"}
                        {volist name="info.images" id="value"}
                        <tr id="image-tr-{$value.id}" name="images">
                            <td>
                                <input type="text" id="image-input-{$value.id}" name="images_id" value="{$value.id}" style="display: none">
                                <img src="{$value.image}" id="image-{$value.id}" onclick="saveimages('{$value.id}')">
                            </td>
                            <td>
                                <input type="text" name="images_url" class="layui-input" id="image-url-{$value.id}" value="{$value.url|default=''}">
                            </td>
                            <td>
                                <input type="text" name="images_title" class="layui-input" id="image-title-{$value.id}" value="{$value.title|default=''}">
                            </td>
                            <td>
                                <input type="text" name="images_info" class="layui-input" id="image-info-{$value.id}" value="{$value.info|default=''}">
                            </td>
                            <td>
                                <input type="number" name="images_sort" class="layui-input" id="image-sort-{$value.id}" value="{$value.sort|default=''}">
                            </td>
                            <td>
                                <a href="javascript:;" onclick="del_image('{$value.id}')">Delete</a>
                            </td>
                        </tr>
                        {/volist}
                        {/notempty}
                        <tr id="image-tr-0">
                            <td>
                                <input type="text" id="image-input-0" style="display: none">
                                <img src="/static/admin/img/none.jpg" id="image-0" onclick="saveimages('image-0')">
                            </td>
                            <td>
                                <input type="text" class="layui-input" id="image-url-0">
                            </td>
                            <td>
                                <input type="text" id="image-title-0" class="layui-input">
                            </td>
                            <td>
                                <input type="text" id="image-info-0" class="layui-input">
                            </td>
                            <td>
                                <input type="number" id="image-sort-0" class="layui-input" value="0">
                            </td>
                            <td>
                                <a href="javascript:;" onclick="save_image(0)">Add</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                Directory to which it belongs
            </label>
            <div class="layui-input-inline">
                <select id="nav_id">
                    {volist name="all" id="value"}
                    <option value="{$value.id}" {notempty name="info.nav_id"} {eq name="info.nav_id" value="$value.id"}selected{/eq}{/notempty}>{$value.name}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <input type="file" id="image-attr-value" onchange="imageattrfile(this)" accept="image/*" style="display: none;">
            <label class="layui-form-label">
                规格(如颜色，尺码，型号)
            </label>
            <div class="layui-input-inline" id="attr_key" style="width: 700px">
                <div class="attr-div">
                    <!--<input type="text" class="layui-input" onchange="addak(this.value)" style="width: 170px">-->
                    <button  class="layui-input" onclick="addak('')" style="background-color:#93D1FF;color:#fff;width: 200px">Add</button>
                </div>
                {volist name="attrkey" id="value"}
                <div class="attr-div" id="ak-{$value.id}">
                   <div class="attr-key">
                       <input type="text" name="attr_key" id="{$value.id}" class="layui-input" value="{$value.name}">
                       <a href="javascript:delak('{$value.id}');" class="a-k-x">X</a>
                   </div>
                   <div class="attr-list" id="av-{$value.id}">
                       <div class="attr-value">
                           <!--<input type="text" class="layui-input" onchange="addav('{$value.id}',this.value)">-->
                           <button  class="layui-input" onclick="addav('{$value.id}','')"  style="background-color:#93D1FF;color:#fff">Add</button>
                       </div>
                       {volist name="value.value_list" id="item"}
                       <div class="attr-value" id="av-{$value.id}-{$item.id}">
                           <input type="text" name="{$value.id}" class="layui-input" value="{$item.name}" onchange="attrdata();">
                           <input type="text" name="images-att-{$value.id}" id="images-input-{$item.id}" value="{$item.image_id}" style="display: none">
                           <a href="javascript:attrvalueimage('{$item.id}');" class="a-i" id="a-image-{$item.id}">
                               {empty name="item.image"}
                               +
                               {else}
                               <img src="{$item.image}">
                               {/empty}
                           </a>
                           <a href="javascript:delav('{$value.id}-{$item.id}');" class="a-v-x">X</a>
                       </div>
                       {/volist}
                   </div>
                </div>
                {/volist}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                SDK
            </label>
            <div class="layui-input-inline" style="width: 850px">
                <table class="table-attr">
                    <thead>
                    <tr>
                        <th>Title</th>
                        <th>Images</th>
                        <th>Price</th>
                        <th>Describe</th>
                        <th>库存</th>
                        <!--<th>Sort</th>-->
                    </tr>
                    </thead>
                    <tbody id="attr-tbody"></tbody>
                </table>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                Content
            </label>
            <div class="layui-input-inline">
                <script type="text/javascript" charset="utf-8" src="/ueditor-plus/dist/ueditor.config.js"></script>
                <script type="text/javascript" charset="utf-8" src="/ueditor-plus/dist/ueditor.all.js"></script>
                <script type="text/javascript" charset="utf-8" src="/ueditor-plus/lang/zh-cn/zh-cn.js?7a537435"></script>
                <script id="editor" type="text/plain" style="width:800px;height:500px;">
                    {notempty name="info.content"}{$info.content.content|raw}{/notempty}
                </script>
                <script type="text/javascript">
                // 初始化编辑器
                var ue = UE.getEditor('editor');
                </script>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="add" lay-submit="">
                Confirm
            </button>
        </div>
    </div>
</div>
<script>
    var attr_list = '{notempty name="attr"}{$attr|raw}{/notempty}';
    layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer;
        //监听提交
        form.on('submit(add)', function(){
            let message = {
                name:document.getElementById('name').value,
                price:document.getElementById('price').value,
                images:getimagesid(),
                attr:getattr(),
                attrkey:attr_data,
                info:document.getElementById('info').value,
                image_id:document.getElementById('image_id').value,
                nav_id:document.getElementById('nav_id').value,
                content:ue.getContent()
            };
            console.log(message);
            //发异步，把数据提交给php
            post('/sys/goods/save?id={$info.id|default=0}',message);
        });
    });
    function post_result(res){
        layer.alert("OptionSuccess", {icon: 6},function () {
            // 获得frame索引
            var index = parent.layer.getFrameIndex(window.name);
            //关闭当前frame
            parent.layer.close(index);
            parent.location.reload();
        });
    }
    attrdata();
</script>
</body>
</html>